import { useState } from 'react'
import { Input } from '@/library/gallery/components/Input'
import { useThrottle } from '@/library/hooks/use-throttle'

export default (): React.ReactNode => {
  const [value, setValue] = useState<string>()
  const throttledValue = useThrottle(value, { wait: 1500 })

  return (
    <div>
      <Input
        value={value}
        onChange={(e) => setValue(e)}
        placeholder="Typed value"
        style={{ width: 280 }}
      />
      <p style={{ marginTop: 16 }}>throttledValue: {throttledValue}</p>
    </div>
  )
}
